<template>
  <view class="p-img" v-if="imgs?.length">
    <view v-for="(item, index) in imgs" :key="index" class="p-img-item" @click.stop="previewImg(item, index)">
      <image style="width:100%; height:100%; z-index:-1" :src="item.img_url" mode="scaleToFill"></image>
      <view class="img-mask" v-if="!lookStatus">
        <image src="@/static/common/lock.svg" class="img-lock" v-if="pageType == 'details'"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { setItem, getItem } from "@/utils/storage";
import useStore from "@/store";
const { person } = useStore();
const pageType = inject("pageType", "");
const props = defineProps({
  id: {
    type: [Number, String],
    default: "",
  },
  imgs: {
    type: Array,
    default: () => [],
  },
  look: {
    type: [Number, String],
    default: "",
  },
});

const lookStatus = computed(() => {
  return props.look && props.look == 1;
});

// 查看照片
const previewImg = (item, index) => {
  const { appLogin, phone } = getItem("user_info") || {};
  if (!(appLogin && phone)) {
    uni.navigateTo({ url: "/subPages/register/index" });
    return;
  }
  person.updatePersonId({ user_id: props.id, look: props.look });
  const imgs = props.imgs.map((v) => v.img_url);
  setItem("imgs", imgs);
  uni.navigateTo({ url: "/subPages/preview/index?cur=" + index });
};
</script>

<style lang=scss scoped>
.p-img {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 24rpx;
  padding-top: 20rpx;
  .p-img-item {
    position: relative;
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
    overflow: hidden;
  }

  .img-mask {
    display: flex;
    justify-content: center;
    align-items: center;
    .img-lock {
      width: 48rpx;
      height: 48rpx;
    }
  }
}

.pic-con {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20rpx;
}
.pic-box {
  width: 200rpx;
  height: 200rpx;
  background: #fff5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.p-icon {
  width: 112rpx;
  height: 88rpx;
}
</style>